<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <!-- 引入axios和vue的框架文件 -->
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        /* 整体页面背景及基本样式 */
        body {
            font-family: 'Orbitron', sans-serif; /* 使用具有科幻感的字体 */
            background: radial-gradient(circle at center, #000000, #111111); /* 径向渐变背景，营造宇宙深邃感 */
            margin: 0;
            padding: 0;
            color: #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden; /* 隐藏页面溢出部分 */
        }

        /* 外层容器样式 */
        div {
            background-color: rgba(20, 20, 20, 0.8); /* 半透明深色背景 */
            border-radius: 20px; /* 较大圆角，体现科幻圆润风格 */
            box-shadow: 0 0 30px rgba(0, 255, 255, 0.5), 0 0 60px rgba(0, 255, 255, 0.3) inset; /* 外发光与内发光效果 */
            padding: 30px;
            width: 350px;
            animation: fadeInOut 1s ease infinite alternate; /* 闪烁动画效果 */
        }

        /* 定义闪烁动画关键帧 */
        @keyframes fadeInOut {
            from {
                opacity: 0.8;
            }

            to {
                opacity: 1;
            }
        }

        /* 标题样式 */
        h1 {
            color: #00FFFF; /* 青蓝色标题，科幻风格常见颜色 */
            font-size: 32px;
            text-align: center;
            text-shadow: 0 0 15px rgba(0, 255, 255, 0.8); /* 发光文字阴影 */
            animation: titleGlow 2s infinite alternate; /* 标题闪烁动画 */
        }

        /* 定义标题闪烁动画关键帧 */
        @keyframes titleGlow {
            from {
                text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
            }

            to {
                text-shadow: 0 0 30px rgba(0, 255, 255, 1);
            }
        }

        /* 输入框通用样式 */
        input[type="text"],
        input[type="password"] {
            width: 100%;
            height: 40px;
            margin-bottom: 20px;
            border: 1px solid rgba(0, 255, 255, 0.3); /* 淡蓝色边框 */
            border-radius: 10px;
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.3); /* 半透明黑色背景 */
            color: #fff;
            transition: border-color 0.3s ease; /* 边框颜色过渡效果 */
        }

        input[type="text"]:focus,
        input[type="password"]:focus {
            border-color: #00FFFF; /* 获取焦点时边框变色 */
            outline: none; /* 去除默认聚焦外框 */
        }

        /* 登录按钮样式 */
        input[type="button"] {
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 10px;
            padding: 14px 30px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease; /* 背景色和缩放过渡效果 */
            position: relative; /* 相对定位，方便添加点击特效 */
            overflow: hidden; /* 隐藏超出按钮范围的内容 */
            animation: buttonGlow 2.5s infinite; /* 按钮发光动画 */
        }

        /* 定义按钮发光动画关键帧 */
        @keyframes buttonGlow {
            0% {
                box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
            }

            50% {
                box-shadow: 0 0 30px rgba(0, 255, 255, 0.8);
            }

            100% {
                box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
            }
        }

        input[type="button"]:hover {
            background-color: #0056b3;
            transform: scale(1.05); /* 鼠标悬停时放大 */
        }

        input[type="button"]:active::after {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background-color: rgba(0, 255, 255, 0.3); /* 点击时发光效果 */
            border-radius: 50%;
            opacity: 0;
            animation: buttonRipple 0.8s ease-out; /* 点击发光动画 */
        }

        /* 定义点击发光动画关键帧 */
        @keyframes buttonRipple {
            0% {
                transform: scale(0);
                opacity: 1;
            }

            100% {
                transform: scale(1);
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div>
        <h1>登录页面</h1>
        <input type="text" placeholder="用户名" v-model="user.username">
        <input type="password" placeholder="密码" v-model="user.password">
        <input type="button" value="登录" @click="login()">
    </div>
    <script>
        let v = new Vue({
            el: "body>div",
            data: {
                user: { username: "", password: "" }
            },
            methods: {
                login() {
                    // 前端简单验证，确保用户名和密码不为空，可根据实际需求强化验证逻辑
                    if (!v.user.username ||!v.user.password) {
                        alert("用户名和密码不能为空，请输入后再登录。");
                        return;
                    }
                    axios.post("/v1/users/login", v.user).then(function (response) {
                        if (response.data == 1) {
                            alert("登录成功");
                            location.href = "/";
                        } else if (response.data == 2) {
                            alert("密码错误");
                        } else {
                            alert("用户名不存在");
                        }
                    })
                }
            }
        })
    </script>
</body>

</html>